<template>
  <view class="withdraw-detail">


    <view v-if="loading" class="loading-wrapper">
      <u-loading-icon mode="flower"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>

    <view v-else-if="detail.id" class="detail-content">
      <!-- 状态卡片 -->
      <view class="status-card">
        <view class="status-icon">
          <u-icon 
            :name="getStatusIcon(detail.status)" 
            size="60" 
            :color="getStatusColor(detail.status)"
          ></u-icon>
        </view>
        <view class="status-info">
          <text class="status-text">{{ getStatusText(detail.status) }}</text>
          <text class="amount-text">¥{{ detail.amount }}</text>
        </view>
      </view>

      <!-- 详细信息 -->
      <view class="info-section">
        <view class="section-title">提现信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">提现金额</text>
            <text class="info-value">¥{{ detail.amount }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">手续费</text>
            <text class="info-value">¥{{ detail.fee || 0 }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">实际到账</text>
            <text class="info-value highlight">¥{{ detail.actual_amount || (detail.amount - (detail.fee || 0)) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">收款方式</text>
            <text class="info-value">{{ getPaymentMethodText(detail.payment_method) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">收款账户</text>
            <text class="info-value">{{ maskAccount(detail.account) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">收款人</text>
            <text class="info-value">{{ maskName(detail.real_name) }}</text>
          </view>
        </view>
      </view>

      <!-- 时间信息 -->
      <view class="info-section">
        <view class="section-title">时间记录</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">申请时间</text>
            <text class="info-value">{{ formatTime(detail.create_time) }}</text>
          </view>
          <view class="info-item" v-if="detail.audit_time">
            <text class="info-label">审核时间</text>
            <text class="info-value">{{ formatTime(detail.audit_time) }}</text>
          </view>
          <view class="info-item" v-if="detail.process_time">
            <text class="info-label">处理时间</text>
            <text class="info-value">{{ formatTime(detail.process_time) }}</text>
          </view>
          <view class="info-item" v-if="detail.finish_time">
            <text class="info-label">完成时间</text>
            <text class="info-value">{{ formatTime(detail.finish_time) }}</text>
          </view>
        </view>
      </view>

      <!-- 备注信息 -->
      <view class="info-section" v-if="detail.remark">
        <view class="section-title">备注说明</view>
        <view class="remark-content">
          <text class="remark-text">{{ detail.remark }}</text>
        </view>
      </view>

      <!-- 进度时间线 -->
      <view class="timeline-section">
        <view class="section-title">处理进度</view>
        <view class="timeline-list">
          <view 
            v-for="(step, index) in timelineSteps" 
            :key="index"
            class="timeline-item"
            :class="{ active: step.active, completed: step.completed }"
          >
            <view class="timeline-dot"></view>
            <view class="timeline-content">
              <text class="timeline-title">{{ step.title }}</text>
              <text class="timeline-time" v-if="step.time">{{ step.time }}</text>
              <text class="timeline-desc" v-if="step.desc">{{ step.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-section" v-if="detail.status === 'pending'">
        <u-button 
          type="error" 
          @click="cancelWithdraw"
          :loading="cancelLoading"
        >
          取消申请
        </u-button>
      </view>

      <!-- 客服联系 -->
      <view class="contact-section">
        <view class="contact-card" @click="contactService">
          <view class="contact-info">
            <u-icon name="kefu" size="24" color="#007aff"></u-icon>
            <text class="contact-text">遇到问题？联系客服</text>
          </view>
          <u-icon name="arrow-right" size="16" color="#999"></u-icon>
        </view>
      </view>
    </view>

    <view v-else class="error-wrapper">
      <u-empty text="提现记录不存在" mode="error"></u-empty>
    </view>
  </view>
</template>

<script>
import { getStatus, cancel } from '@/api/withdraw'

export default {
  name: 'WithdrawDetail',
  data() {
    return {
      withdrawId: '',
      detail: {},
      loading: false,
      cancelLoading: false
    }
  },
  computed: {
    timelineSteps() {
      const steps = [
        {
          title: '提交申请',
          time: this.formatTime(this.detail.create_time),
          desc: '提现申请已提交',
          completed: true,
          active: false
        },
        {
          title: '审核中',
          time: this.formatTime(this.detail.audit_time),
          desc: this.detail.status === 'pending' ? '等待审核' : '审核通过',
          completed: ['processing', 'success', 'failed'].includes(this.detail.status),
          active: this.detail.status === 'pending'
        },
        {
          title: '处理中',
          time: this.formatTime(this.detail.process_time),
          desc: this.detail.status === 'processing' ? '正在处理转账' : '转账完成',
          completed: this.detail.status === 'success',
          active: this.detail.status === 'processing'
        },
        {
          title: '完成',
          time: this.formatTime(this.detail.finish_time),
          desc: this.getCompleteDesc(),
          completed: ['success', 'failed'].includes(this.detail.status),
          active: false
        }
      ]
      
      // 如果是失败或取消状态，调整时间线
      if (this.detail.status === 'failed') {
        steps[3].desc = '提现失败'
        steps[3].completed = true
      } else if (this.detail.status === 'cancelled') {
        return [
          steps[0],
          {
            title: '已取消',
            time: this.formatTime(this.detail.cancel_time),
            desc: '提现申请已取消',
            completed: true,
            active: false
          }
        ]
      }
      
      return steps.filter(step => step.time || step.active || step.completed)
    }
  },
  onLoad(options) {
    if (options.id) {
      this.withdrawId = options.id
      this.loadDetail()
    }
  },
  methods: {
    async loadDetail() {
      if (!this.withdrawId) return
      
      this.loading = true
      try {
        const res = await getStatus({ id: this.withdrawId })
        if (res.code === 0) {
          this.detail = res.data || {}
        } else {
          uni.showToast({
            title: res.msg || '获取详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取提现详情失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    async cancelWithdraw() {
      const confirmRes = await uni.showModal({
        title: '确认取消',
        content: '确定要取消这笔提现申请吗？',
        confirmText: '确认',
        cancelText: '取消'
      })

      if (!confirmRes.confirm) return

      this.cancelLoading = true
      try {
        const res = await cancel({ id: this.withdrawId })
        
        if (res.code === 0) {
          uni.showToast({
            title: '取消成功',
            icon: 'success'
          })
          
          // 重新加载详情
          setTimeout(() => {
            this.loadDetail()
          }, 1500)
        } else {
          uni.showToast({
            title: res.msg || '取消失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('取消提现失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.cancelLoading = false
      }
    },
    contactService() {
      // 这里可以跳转到客服页面或拨打客服电话
      uni.showToast({
        title: '客服功能开发中',
        icon: 'none'
      })
    },
    getStatusIcon(status) {
      const icons = {
        pending: 'clock',
        processing: 'loading',
        success: 'checkmark-circle',
        failed: 'close-circle',
        cancelled: 'minus-circle'
      }
      return icons[status] || 'help-circle'
    },
    getStatusColor(status) {
      const colors = {
        pending: '#ff9500',
        processing: '#007aff',
        success: '#34c759',
        failed: '#ff3b30',
        cancelled: '#8e8e93'
      }
      return colors[status] || '#8e8e93'
    },
    getStatusText(status) {
      const statusMap = {
        pending: '待审核',
        processing: '处理中',
        success: '提现成功',
        failed: '提现失败',
        cancelled: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getPaymentMethodText(method) {
      const methods = {
        wechat: '微信',
        alipay: '支付宝',
        bank: '银行卡'
      }
      return methods[method] || '未知'
    },
    getCompleteDesc() {
      if (this.detail.status === 'success') {
        return '提现成功，资金已到账'
      } else if (this.detail.status === 'failed') {
        return this.detail.remark || '提现失败'
      }
      return '等待完成'
    },
    maskAccount(account) {
      if (!account) return ''
      if (account.length <= 4) return account
      return account.substring(0, 3) + '****' + account.substring(account.length - 4)
    },
    maskName(name) {
      if (!name) return ''
      if (name.length <= 1) return name
      return name.substring(0, 1) + '*'.repeat(name.length - 1)
    },
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp * 1000)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },

  }
}
</script>

<style lang="scss" scoped>
.withdraw-detail {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.loading-wrapper {
  padding: 100rpx 0;
  text-align: center;
  
  .loading-text {
    display: block;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.error-wrapper {
  padding: 100rpx 0;
}

.detail-content {
  padding-bottom: 40rpx;
}

.status-card {
  margin: 20rpx;
  padding: 50rpx;
  background: white;
  border-radius: 20rpx;
  text-align: center;
  
  .status-icon {
    margin-bottom: 20rpx;
  }
  
  .status-info {
    .status-text {
      display: block;
      font-size: 32rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .amount-text {
      display: block;
      font-size: 60rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.info-section {
  margin: 20rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  
  .section-title {
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .info-list {
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .info-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333;
        
        &.highlight {
          color: #007aff;
          font-weight: bold;
        }
      }
    }
  }
  
  .remark-content {
    padding: 30rpx;
    
    .remark-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.timeline-section {
  margin: 20rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  
  .section-title {
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .timeline-list {
    padding: 30rpx;
    
    .timeline-item {
      display: flex;
      position: relative;
      padding-bottom: 40rpx;
      
      &:last-child {
        padding-bottom: 0;
        
        &::after {
          display: none;
        }
      }
      
      &::after {
        content: '';
        position: absolute;
        left: 15rpx;
        top: 30rpx;
        bottom: -10rpx;
        width: 2rpx;
        background: #e0e0e0;
      }
      
      &.completed::after {
        background: #34c759;
      }
      
      &.active::after {
        background: #007aff;
      }
      
      .timeline-dot {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background: #e0e0e0;
        margin-right: 20rpx;
        margin-top: 5rpx;
        position: relative;
        z-index: 1;
      }
      
      &.completed .timeline-dot {
        background: #34c759;
      }
      
      &.active .timeline-dot {
        background: #007aff;
      }
      
      .timeline-content {
        flex: 1;
        
        .timeline-title {
          display: block;
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .timeline-time {
          display: block;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 5rpx;
        }
        
        .timeline-desc {
          display: block;
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}

.action-section {
  margin: 40rpx 20rpx;
}

.contact-section {
  margin: 20rpx;
  
  .contact-card {
    padding: 30rpx;
    background: white;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .contact-info {
      display: flex;
      align-items: center;
      gap: 15rpx;
      
      .contact-text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}
</style>
